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DOCUMENT OBJECT MODEL CACHING AND VALIDATION 

CROSS-REFERENCE TO RELATED APPLICATIONS 
This application claims the benefit of U.S. Provisional Application No. 60/415,600, 
filed October 1, 2002, which is incorporated by reference herein. 

BACKGROUND 

The present invention relates to data processing by digital computer, and more 
particularly to document object model caching and validation. 

Computers can communicate through the use of various Internet technologies. For 
example, a server computer can send "pages" to a client computer. In this specification, 
pages are also referred to as user interface (UI) pages. Such pages typically include 
instructions in a markup language (e.g., Hypertext Markup Language (HTML)), and/or in a 
script language (e.g., JavaScript). The client computer can use a Web browser to interpret the 
pages and thereby provide screen presentations to a user. The appearance of the screen 
presentations can change upon the occurrence of various events - e.g., when the user interacts 
with or navigates through various UI elements of a page, when the user enters data, or when 

the server computer updates a page. 

Ensuring adequate performance of applications that require client-server 
communication can be challenging because of numerous limitations, including: limitations 
in communication speed and the bandwidth that is available, the time required for client- 
server roundtrips, and the time-consuming computations required to provide the screen 
presentations (rendering) at the client computer in cases where the client computer is 

responsible the rendering. 

Various techniques can be used to alleviate the problems created by such limitations. 
For example, layout (e.g., arrangement of elements on screen), style (e.g., fonts, colors), and 
content (e.g., text messages or pictures) can be transmitted to a client separately. A browser 
can combine the appropriate layout, style, and content at the time of presentation. However, 
requests from the client to the server for presentation updates may still require client-server 
communication (in both directions, so-called roundtrips). 
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Applications that are built according to the model-view-controller (MVC) design 
methodology provide views that present an application model to a user. The user can interact 
with the views, causing a corresponding controller to manipulate the model. The model can 
then update its views as appropriate. A UI page of an application can include multiple views. 
5 The structure of a UI page can be described as a UI tree structure, where the root node of the 
tree represents the UI page, and child nodes represent UI elements included in the page. The 
UI elements can include one or more views and one or more controls through which a user 
interacts with, provides input to, and/or controls the application. Some examples of controls 
are text fields, radio buttons, tables, trays, and drop-down menus. Each node can have 
1 o further child nodes (for example, to represent nested views). 

An application running on a server computer can send a UI page with markup 
language portions that describe the UI elements of a UI page to a client computer with a 
browser. The client can parse the markup language portions of the UI page and build a 
document object model (DOM) of the UI page. The DOM (e.g., HTML DOM) can include 
1 5 nodes in a DOM hierarchy that represent the UI elements of the UI page in the browser. The 
browser presents a screen presentation of the UI page that corresponds to the DOM. 

When a request is triggered (e.g., by a user interaction, or an interaction with another 
computer system) that results in a change to a UI element (e.g., a new data value or 
background color for the UI element), typically, the whole UI page is re-rendered. This can 
20 cause unpleasant effects for the user. For example, the user may have to wait for the entire 
DOM to be regenerated, and when the new DOM is finally presented, it can cause the 
browser screen to flicker. 

SUMMARY OF THE INVENTION 
The present invention provides methods and apparatus, including computer program 
25 products, implementing techniques for document object model caching and validation. 

In general, in one aspect, the techniques include identifying a change of a user 
interface (UI) element that references a node of a document object model (DOM) hierarchy; 
determining whether the change of the UI element can be applied to the DOM hierarchy by 
using an update function; if the change can be applied by using the update function, finding 
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in the DOM hierarchy the node that is referenced by the Ul element and modifying at least 
one attribute related to the node according to the change by using the update function; and 

else, setting a dirty flag. 

Advantageous implementations of the invention include one or more of the following 
features. The update function is a delta renderer. The dirty flag indicates invalidity of a 
cached DOM representation of the UI element. The dirty flag indicates invalidity of a cached 
DOM representation of a further UI element that is a parent of the UI element. 

The cached DOM representation comprises the node and the at least one attribute is 
an attribute of the node. The cached DOM representation comprises the node and the at least 
one attribute is an attribute of the node. The cached DOM representation comprises a sub- 
hierarchy of the DOM hierarchy and the node is the root node of the sub-hierarchy and the at 
least one attribute is an attribute of a sub-node of the sub-hierarchy. The cached DOM 
representation comprises a sub-hierarchy of the DOM hierarchy and the node is the root node 
of the sub-hierarchy and the at least one attribute is an attribute of a sub-node of the sub- 
hierarchy. 

In general, in another aspect, the techniques include receiving a request to render a 
user interface (UI) element of a Ul-tree; determining whether a dirty flag is set for a cached 
document object model (DOM) representation of a flagged UI element that is on the path of 
the UI element in the UI tree; the flagged UI element having a reference to a node of the 
DOM hierarchy; if the dirty flag is set, generating a new DOM representation of the flagged 
UI element and inserting the new DOM representation into the DOM hierarchy by using the 
Ul-tree and the reference to the node; and else, inserting the cached DOM representation into 
the DOM hierarchy by using the Ul-tree and the reference to the node. 

Advantageous implementations of the invention include one or more of the following 
features. The cached DOM representation is a cached sub-tree of the DOM hierarchy and the 
node is the root node of the cached sub-tree. The new DOM representation is a new sub-tree 
of the DOM hierarchy and the node is the root node of the new sub-tree. 

The invention can be implemented to realize one or more of the following advantages. 
Modifications to the DOM can be made without re-rendering the entire DOM. This reduces 
the amount of client-side processing required to re-render a page. The use of DOM caching 
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reduces the frequency of client-server roundtrips. One implementation of the invention 
provides all of the above advantages. 

The details of one or more implementations of the invention are set forth in the 
accompanying drawings and the description below. Further features, aspects, and advantages 
of the invention will become apparent from the description, the drawings, and the claims. 

BRIEF DESCRIPTION OF THE DRAWINGS 
FIG. 1 illustrates a UI page. 
FIG. 2 illustrates a UI tree. 

FIG. 3 illustrates a UI tree and a corresponding DOM hierarchy. 
FIG. 4 is a flow diagram of a first method for modifying a DOM hierarchy. 
FIG. 5 is a flow diagram of a second method for modifying a DOM hierarchy. 
Like reference numbers and designations in the various drawings indicate like 

elements. 

DETAILED DESCRIPTION 
Persons of skill in the art can implement a computer system with a server computer 
("server") and a client computer ("client") that are controlled by computer programs 
according to the invention. In one implementation, Dynamic Hypertext Markup Language 
(DHTML) is used to modify a DOM (e.g., an HTML DOM) to change a presentation 
dynamically after a UI page has been received and rendered by a browser in the client. 

In such an implementation, the server can send browser-compatible instructions to the 
client to provide a framework that enables the client to render UI elements included in a UI 
page. Such instructions can be written in a scripting language, such as JavaScript or Visual 
Basic Script. A browser that supports DHTML can use the framework to manipulate a UI 
page without the need for server roundtrips if the corresponding content that is needed for the 
manipulation is already available at the client (e.g., if the content can be stored in an HTML- 
DOM cache). 

FIG 1 shows a sample UI page 100. A UI page can include multiple UI elements and 
vtews. For example, the UI page in FIG. 1 includes a first view LIST 1 10 and a second view 
DETAIL 120. Views can include UI elements. For example, the LIST view includes a UI 



Attorney Docket No. 13913-058001; 2002P00218 US 

element table control TABLE 130 to list customers, and the DETAIL view includes UI 
elements first input field NAME 140 and second input field ADDRESS 150 to maintain the 
name and address of a customer that is selected in the table control. 

FIG. 2 shows a UI tree 200 that represents the hierarchical structure of the UI 
elements contained in the UI page 100. The UI tree has a root node 210 represents the 
overall page and child nodes 220 that represent the UI elements contained in the page. The 
child nodes include nodes 230, 240 that correspond to the views (DETAIL, LIST). Each 
child node 230, 240 has further child nodes 250,260 that correspond to the nested views and 
controls (ADDRESS, NAME, TABLE, ROW). 

As shown in FIG. 3, the UI tree 200 can reference a DOM hierarchy 300 for the UI 
page 100. Each child node 220 of the UI tree 200 can be associated with a corresponding 
node 3 1 0 in the DOM hierarchy (shown by the solid and dashed arrows). 

FIG. 4 is a flow diagram of a method 400 for modifying a document object model 
(DOM) hierarchy in a browser. In method 400, the client identifies (410) a change to a UI 
element that references a node of the DOM hierarchy. For example, the browser can 
recognize that a user has modified the address in UI element ADDRESS, thereby changing 
the value of the UI element, and potentially requiring a change of the background color of the 
UI element to indicate that the value has been modified. 

The client then determines (420) whether the change to the UI element can be applied 
to the DOM hierarchy by using a delta renderer. A delta renderer is a set of update functions 
that can modify the DOM representation of a UI element directly by using, for example, 
setter functions for various attributes of the UI element (e.g., setValue, setMaxLength, 
setColor, etc.). In one implementation, some, but not all, of the attributes of the UI element 
have setter functions, and the step of determining whether the delta renderer can be used 
involves determining whether a setter function is available for the particular attribute that has 
changed. If there is a function included in the delta renderer that can be used to adjust the 
DOM hierarchy according to the change, then delta renderer can be used. 

If the change can be applied by using a delta renderer, the browser finds (430) in the 
DOM hierarchy the node that is referenced by the UI element. In the example in FIG. 3, 
references from view UI elements to the corresponding DOM nodes are shown by solid 
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arrows. References from controls included in the views are shown by dashed arrows. The 
nodes shaded gray are the nodes referenced by the views. When the DOM node that is 
referenced by a UI element is identified, the browser modifies (440) at least one attribute 
related to the node according to the change to the UI element. For example, the value and 
color attnbutes of the node referenced by the UI element ADDRESS can be changed by the 
delta renderer. To accomplish this, a delta renderer can provide a corresponding setValue 
and setColor function. By applying the changes directly to the corresponding nodes of the 
DOM hierarchy, a complete re-generating (re-rendering) of the changed UI element is not 
necessary. In particular, a control can use (460) DHTML methods to modify DOM sub-tree 
attributes corresponding to a control instance. 

Depending on the complexity of a UI element, its DOM representation can include a 
node as well as a sub-tree of the DOM hierarchy (the node being the root node of the sub- 
tree) If the UI element is represented by a node, the attributes that are changed (e.g., value, 
color) that are attributes of the node. If the UI element is represented by a DOM sub-tree, the 
attnbutes that are changed can include attributes of any of the DOM nodes in the sub-tree. 

Continuing with method 400, if the change to the UI element cannot be applied by 
using a delta renderer, the browser sets (450) a dirty flag. The dirty flag can indicate 
invalidity of a cached DOM representation of the UI element. For example, in the sample 
DOM shown in FIG. 3, the dirty flag can be set for the DOM representation of the UI 
element ADDRESS. The dirty flag can also indicate invalidity of a cached DOM 
representation of a UI element that is an ancestor of the changed UI element in the UI tree. 
For example, the dirty flag can be set for a UI element that is the parent of the changed UI 
element. It can also be set for any further UI element that is on the path from the root node to 
the changed UI element. For example, instead of setting the dirty flag for the UI element 
ADDRESS, the dirty flag can be set for the view DETAIL that includes the ADDRESS 
element. 

In one implementation, method 400 can be executed by the client without a need to 
send data from the server to the client. This can improve application performance and reduce 
the bandwidth required for communication between the client and server. 
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FIG. 5 is a flow diagram of a method 500 for modifying a DOM hierarchy in a 
browser. In method 500, a client receives (510) a request to render a UI element of a UI tree. 
The client then determines (520) whether a dirty flag is set for a cached DOM representation 
of a UI element that is on the path of the UI element to be rendered (an element whose dirty 
flag is set is referred to as a flagged element). The flagged UI element can have a reference 

to a node of the DOM hierarchy. 

The dirty flag can be set for the UI element to be rendered, or for another UI element 
that is on the path of the UI element to be rendered. Where the dirty flag is set indicates what 
portion of the cached DOM representation is invalid. As an example, given a request to 
render the UI element ADDRESS, the dirty flag may be set for the cached DOM 
representation of the view DETAIL or for the cached DOM representation of the UI element 
ADDRESS - in either case, the result of the determining step 520 is that a dirty flag is set. 

If the dirty flag is set, the client generates (530) a new DOM representation of the 
flagged UI element, and inserts (540) the new DOM representation into the DOM hierarchy 
by using the UI tree and the reference from the flagged UI element to the node in the DOM 
hierarchy. If the flagged UI element (e.g., view DETAIL) includes further UI elements (e.g., 
NAME, ADDRESS), the UI tree can be used to evaluate which UI elements belong to the 
flagged UI element. The new DOM representation can be a new sub-tree of the DOM 
hierarchy where the node is the root node of the new sub-tree. 

If the dirty flag is not set, the client inserts (550) the cached DOM representation into 
the DOM hierarchy by using the UI tree and the reference to the node. The cached DOM 
representation can be a cached sub-tree of the DOM hierarchy where the node is the root 

node of the cached sub-tree. 

The invention can be implemented in digital electronic circuitry, or in computer 
hardware, firmware, software, or in combinations of them. The invention can be 
implemented as a computer program product, i.e., a computer program tangibly embodied in 
an information carrier, e.g., in a machine-readable storage device or in a propagated signal, 
for execution by, or to control the operation of, data processing apparatus, e.g., a 
programmable processor, a computer, or multiple computers. A computer program can be 
written in any form of programming language, including compiled or interpreted languages, 
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and i. can be deployed in any form, inching as a stand-atone program or as a modnto, 
e„mp.ne„ t ,snbron.ine,oro,her U m,sni I ablefornseinacompn.in g env i ronmen«.A 

computer program can be dep.oyed to be executed on one computer or on multiple computers 
a, one site or dis.ribu.eu across muUiple si.es and interconnected by a commumcahon 
network. 

Method steps of .he invention can be performed by one or more programmable 
pressors executing a computer program to perform functions of Ore invention by operattng 
on input data and generating output. Method steps can also be performer! by, and apparatus 
of.be invention can be implement as, special purpose logic circuitry, e.g„ an FPGA (field 
programmable gate array) or an ASIC (application-specific integrated crcutt). 

Processors suitable for .he execution of a computer program include, by way of 
example, both genera, and specia, purpose microprocessors, and any one or more processors 
of any Kind of digital computer. Generally, a processor wiU receive instructions and data 
from a read-on,y memoty or a random access ntemoty or both. The essentia, elements of a 
computer are a processor for executing instructions and one or more memory devices or 
storing instructions and data. GeneraHy, a computer will at»o inchtde, or be operattve.y 
coupled ,o receive data from or transfer da<a to, orhoth, one or more mass storage devrces for 
st oring da,a, e.g., magnetic, magneto-optica, disks, or optica, disks. Information earners 
suit ab,e for embodying computer progmm instructions and data inchtde all forms of 
non-vo,ati,e memory, inc.uding by way of example semiconductor memory dev,ces e^g., 
EPROM EEPROM, and flash memory devices; magnetic disks, e.g., internal hard disks or 

,j. Wom i rr> ROM and DVD-ROM disks. The processor 
removable disks; magneto-optical disks; and CD-ROM ana uv 

< Clinnlem ented bv or incorporated in special purpose logic circuitry, 
and the memory can be supplementea oy, ui mw v 

To provide for interaction with a user, the invention can be implemented on a 
computer having a display device, e.g., a CRT (cathode ray tuhe) or LCD (liquid crystal 
d,splay) monitor, for displaying information to the user and a keyboard and a pointtng 
device e g„ a mouse or a trackball, by which ft. user can provide inpu. to the computer. 
Other kinds of devices can be used to provide for in.erac.ton with a user as well; for example, 
feedback provided ,0 .he user can be any form of sensory feedback, e.g., visual feedback, 
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that includes a front-end component, e.g., a chent p 

appuca, : serv :: — — — 

graphical user .nterface W mmbina ,i„„ of such back-end, middleware, or 

^endcomponen, Theconrpone ntso >" ^oonetwor, B-*-- 
m edium of digital data commun.cahon, e.g., ^ 
c o mmU „,cat i o„ n e W o*s in c,„dealoea 1 area„etwo*(LAN) 

("WAN"), e.g., the Internet. « client and server are 



What is claimed is 
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